<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <!-- 引入样式 -->
  <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="../app/lib/ZohoCrmHelper.js" type="text/javascript"></script>
  <script src="../app/lib/ZSDK.js" type="text/javascript"></script>
  <script src="../app/lib/jquery-1.10.2.js" type="text/javascript"></script>
  <script src="../app/lib/ZohoEmbededAppSDK.min.js" type="text/javascript"></script>
  <script src="../app/lib/axios.min.js" type="text/javascript"></script>
  <title>测试页面</title>
  </title>
</head>

<body>
  <div id="app">
    <div style="height:20%;padding-left: 20px;border: 1px solid rgb(209, 202, 202);
              box-shadow: 3px 3px 5px #dbdfe0;
              border-radius: 5px;
              margin-bottom: 20px;padding-top: 10px;">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="客户名称">
            <el-input v-model="formInline.searchName" placeholder="客户名称"></el-input>
          </el-form-item>
        <!-- <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item> -->
    </el-form>
  </div>
  <div style="height:70%;border: 1px solid rgb(209, 202, 202);box-shadow: 3px 3px 5px #dbdfe0;border-radius: 5px;">
    <el-table
        stripe
        :data="tableData.filter(data => !app.formInline.searchName || data.Name.toLowerCase().includes(app.formInline.searchName.toLowerCase()))"
        border
        :summary-method="getSummaries"
        show-summary
        style="width: 100%; margin-top: 20px">
        <el-table-column
        type="index"
        width="50">
        </el-table-column>
        <el-table-column
        prop="Name"
        label="客户名称"
        width="180">
        </el-table-column>
        <el-table-column
        prop="field4"
        label="年份">
        </el-table-column>
        <el-table-column
        prop="field1"
        label="月份">
        </el-table-column>
        <el-table-column
        prop="field2"
        sortable
        label="期初欠款金额">
        </el-table-column>
        <el-table-column
        prop="field3"
        sortable
        label="期末欠款金额">
        </el-table-column>
        <el-table-column
        prop="field"
        sortable
        label="超期金额">
        </el-table-column>
    </el-table>
  </div>
</div>


</body>
</html>



<script type="text/javascript">
  const app = new Vue({
      el: '#app',
      data() {
          return {
              fileList: [],
              tableData: [],
              search: '',
              formInline: {
                  searchName: ''
              },

          }
      },
      mounted() {
          this.getData();
          ZOHO.embeddedApp.init();
      },
      methods: {
          getData(){
              ZOHO.embeddedApp.on("PageLoad",function (data) {
                       app.loadQuoteData()
                  })
          },
          async loadQuoteData() {
             let page = 1;
             let listData = [];
             let flag = true;
              while (flag) {
                  await ZOHO.CRM.API.getAllRecords({
                      Entity: "CustomModule18",
                      page: page,
                      per_page: 200
                  })
                      .then(function (data) {
                          if (data.status === 204) {
                              flag = false;
                          } else if (data.data !== undefined) {
                              page++;
                              listData.push(...data.data)
                          }
                      })
              }
              app.tableData = listData;
          },
          getSummaries(param) {
              const { columns, data } = param;
              const sums = [];
              columns.forEach((column, index) => {
              if (index === 0) {
                  sums[index] = '合计';
                  return;
              }
              if (index === 1 || index === 2 || index === 3) {
                  sums[index] = '';
                  return;
              }
              const values = data.map(item => Number(item[column.property]));
              if (!values.every(value => isNaN(value))) {
                  sums[index] = values.reduce((prev, curr) => {
                  const value = Number(curr);
                  if (!isNaN(value)) {
                      return prev + curr;
                  } else {
                      return prev;
                  }
                  }, 0);
                  //取两位小数
                  sums[index] = (sums[index]).toFixed(2);
                  sums[index] += ' 元';
              } else {
                  sums[index] = 'N/A';
              }
              });
              return sums;
          }



      }
  });

</script>
<style>

</style>


